<template>
  <div class="stBody">
    <div class="message">
      <table class="message-tabel">
        <thead>
        <tr>
          <th>专家名称</th>
          <th>专家照片</th>
          <th>职称</th>
          <th>擅长治疗</th>
          <th>号别</th>
          <th>操作</th>
        </tr>
        </thead>

        <tbody>
          <tr>
            <td>刘晓东</td>
            <td>图片</td>
            <td>主治医师</td>
            <td>耳鼻喉、感冒、咳嗽</td>
            <td>专家号</td>
            <td>修改  删除</td>
          </tr>
        </tbody>
      </table>
    </div>

      <div class="page arowMain">
        <div class="pagination arowlast">
          <ul>
            <li v-on:click="topPage()"><a href="javascript:void(0)">首页</a></li>
            <li v-on:click="lastPage()"><a href="javascript:void(0)"><</a></li>
            <li v-for="num in indexs" :class="{active:current_page==num}" @click="jumpPage(num)">
              <a href="javascript:void(0)">{{num}}</a>
            </li>
            <li v-on:click="nextPage()"><a href="javascript:void(0)"> > </a></li>
            <li v-on:click="bottomPage()"><a href="javascript:void(0)">尾页</a></li>
          </ul>
        </div>
        <div class="arow03">
          <input type="text" id="select-state" v-model="selectStateValue" class="input-class" placeholder="10条/页"
                 readonly
                 @blur="ul_hide" @focus="ul_show"/>
          <ul class="showUlleft" id="listsShowUlleft" v-if="show_ul" v-on:click="selectState">
            <li><a href="javascript:void(0)">10条/页</a></li>
            <li><a href="javascript:void(0)">20条/页</a></li>
            <li><a href="javascript:void(0)">40条/页</a></li>
            <li><a href="javascript:void(0)">60条/页</a></li>
            <li><a href="javascript:void(0)">100条/页</a></li>
          </ul>
        </div>
        <div class="arow03">
          <label>跳至</label>
        </div>
        <div class="arow03">
          <input type="text" v-model="current_page" class="input-class" placeholder="0" />
        </div>
        <div class="arow03 wei-page">
          <label>页</label>
        </div>


      </div>




  </div>
</template>

<script>
    export default {
        name: "ServiceTeamBody",
        data () {
            return {
                current_page: 1, //当前页
                pages: 50, //总页数
                changePage: '',//跳转页
                pageSum: 10,//每页大小
                nowIndex: 0,
                show_ul: false,
                selectStateValue: ''
            }
        },
        computed: {
            show: function () {
                return this.pages && this.pages != 1
            },
            efont: function () {
                if (this.pages <= 7) return false;
                return this.current_page > 5
            },
            indexs: function () {

                var left = 1,
                    right = this.pages,
                    ar = [];
                if (this.pages >= 7) {
                    if (this.current_page > 5 && this.current_page < this.pages - 4) {
                        left = Number(this.current_page) - 3;
                        right = Number(this.current_page) + 3;
                    } else {
                        if (this.current_page <= 5) {
                            left = 1;
                            right = 7;
                        } else {
                            right = this.pages;

                            left = this.pages - 6;
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar;
            },
        },
        methods: {
            jumpPage: function (id) {
                this.current_page = id;
            },
            changePageClick: function (e) {
                console.log("#" + e.target)
            },
            nextPage: function () {
                if (this.current_page < this.pages) {
                    this.current_page++;
                }
            },
            lastPage: function () {
                if (this.current_page > 1) {
                    this.current_page--;
                }
            },
            topPage: function () {
                this.current_page = 1;
            },
            bottomPage: function () {
                this.current_page = this.pages;
            },
            ul_hide: function () {
                setTimeout(() => {
                    this.show_ul = !this.show_ul;
                }, 200);
            },
            ul_show: function () {
                this.show_ul = !this.show_ul;
            },
            selectState: function (e) {
                this.selectStateValue = e.target.text;
            }
        }

    }


</script>

<style scoped>

  .stBody {
    width: 85%;
    margin: auto;
    padding: 0;
  }

  .message {
    margin-top: 2em;
    width: 100%;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .message-tabel {
    width: 100%;
    border-collapse: collapse;
  }

  .message-tabel > thead {
    background-color: #775637;
    color: white;

  }

  .message-tabel > thead > tr > th {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    border: 0;
    height: 2em;
  }

  .message-tabel td{
    padding: 25px 0 20px 0;
    color: #775637;
    text-align: center;
    font-size: 10px;
  }

  /*分页*/
  .page {
    background: #fdfdfd;
    padding: 1rem;
    margin: 3rem auto;
    border-radius: 0.2rem;
    counter-reset: pagination;
    text-align: center;
  }

  .page:after {
    clear: both;
    content: "";
    display: table;
  }

  .arowMain {
    display: flex;
  }

  .pagination{
    margin-right: 10px;
  }
  .pagination ul, li {
    list-style: none;
    display: inline;
    padding-left: 0px;
  }

  .pagination li {
    counter-increment: pagination;
  }

  .pagination li:hover a {
    color: #fdfdfd;
    background-color: #775637;
    border: solid 1px #775637;
  }

  .pagination li.active a {
    color: #fdfdfd;
    background-color: #775637;
    border: solid 1px #775637;
  }

  .pagination li a {
    border: solid 1px #d6d6d6;
    border-radius: 0.2rem;
    color: #7d7d7d;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
  }

  .pagination li a:after {

  }

  .arowlast {
    flex: 6;
    text-align: right;
  }

  .arow03{
    flex: 0.5;
    line-height: 40px;
  }

  .wei-page{
    margin-left: 5px;
    text-align: left;
  }

  .input-class {
    width: 60px;
    height: 38px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0, 0, 0, .85);
    border-radius: 2px;
    border-color: #eee;
    outline: none;
    display: block;
    padding-left: 10px;

  }

  .showUlleft {
    background-color: white;
    /*text-indent: px;*/
    list-style: none;
    border: .3px gainsboro solid;
    width: 70px;
    position: relative;
  }

  .showUlleft > li:hover {
    background-color: #1E90FF;
  }

  .showUlleft > li {
    display: block;
    width: 100%;

  }

  .showUlleft > li > a {
    line-height: 1.3;
    font-size: 15px;
    display: block;

    text-decoration: none;
    color: #333333;
    text-align: left;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }



</style>
